<template>
  <div class="content">
    <navBar :navBar="navBar" :callback="onClickRight"></navBar>
    <div class="contentInner">
      <div class="info">
        <div class="imgkuang">
          <!-- <img src="../../assets/images/zichan/erweima.jpg" alt="" /> -->
          <div class="img" id="qr" ref="qrCodeDiv"></div>
        </div>
        <div class="btn">
          <van-button type="info" round color="#588bf8" @click="savePic">{{
            $t("保存二维码")
          }}</van-button>
        </div>
        <div class="tabs" v-if="type == 'USDT'">
          <div
            :class="tabid == 1 ? 'xuanzhong onetab' : 'wxuanzhong onetab'"
            @click="changetab(1)"
          >
            ERC20
          </div>
          <div
            :class="tabid == 2 ? 'xuanzhong onetab' : 'wxuanzhong onetab'"
            @click="changetab(2)"
          >
            TRC20
          </div>
          <!-- <div
            :class="tabid == 3 ? 'xuanzhong onetab' : 'wxuanzhong onetab'"
            @click="changetab(3)"
          >
            OMNI
          </div> -->
        </div>
        <div class="title">{{ $t("充币地址") }}</div>
        <!-- <div class="address" v-if="type == 'USDT'">
        {{
          tabid == 1
            ? usdtaddress[0].chongbi_addres
            : tabid == 2
            ? usdtaddress[1].chongbi_addres
            : usdtaddress[2].chongbi_addres
        }}
      </div>

      <div class="address" v-if="type == 'ETH'">{{ ethaddress }}</div> -->
        <div class="address">{{ address }}</div>
        <div class="copy">
          <van-button
            type="info"
            round
            color="#588bf8"
            plain
            @click="copy(address)"
            >{{ $t("复制") }}</van-button
          >
        </div>
      </div>
      <div class="tianxie">
        <div class="inptitle">{{ $t("充币数量") }}</div>
        <input type="number" v-model="num" />
        <div class="inptitle">{{ $t("上传支付截图") }}</div>
        <div class="upload">
          <van-uploader
            :after-read="afterRead"
            result-type="text"
            v-if="!img"
          />
          <img v-else :src="$basePath + img" alt="" />
        </div>
        <div class="subbtn">
          <van-button type="info" size="large" @click="sub">{{
            $t("提交")
          }}</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from "qrcodejs2";
import navBar from "@/components/navBar.vue";
export default {
  name: "recharge",
  components: { navBar },
  data() {
    return {
      navBar: {
        back: true,
        title: this.$t("充值"),
        close: false,
        btn: "",
        isicon: true,
        iname: "chat-o",
        icolor: "#777777",
      },
      num: "",
      type: "",
      usdtaddress: [],
      btcaddress: "",
      ethaddress: "",
      tabid: 1,
      img: "",
      address: "",
      qr: "",
    };
  },
  created() {
    this.type = this.$route.query.name;
  },
  mounted() {
    this.getPayment();
  },
  beforeUpdate() {},
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({
        name: "onlineService",
      });
    },
    //复制内容
    copy() {
      let that = this;
      that.$copyText(that.address.toString()).then(
        function (e) {
          that.$toast(that.address);
        },
        function (e) {
          that.$toast("Error");
        }
      );
    },
    //生成二维码
    getqr() {
		this.$refs.qrCodeDiv.innerHTML = ''
      this.qr = new QRCode(this.$refs.qrCodeDiv, {
        text: this.address,
        width: 105,
        height: 105,
        colorDark: "#333333", //二维码颜色
        colorLight: "#ffffff", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H
      });
    },
    //保存二维码
    savePic() {
      let myCanvas = document
        .getElementById("qr")
        .getElementsByTagName("canvas");

      let a = document.createElement("a");
      a.href = myCanvas[0].toDataURL("image/png");
      a.download = "1";
      a.click();
      that.$toast("Success");
    },
    changetab(id) {
      this.tabid = id;
      
      this.getPayment();

      this.getqr();
    },
    getPayment() {
      // type=USDT  获取USDT 收款方式,USDT 返回3条
      //   type=BTC  获取BTC  返回一条
      //   type=ETH  获取ETH  返回一条
      //   type=BANK  获取银行卡信息  返回一条
      var that = this;
      $postAxios(
        api.getPayment,
        {
          type: this.type,
        },
        (res) => {
          if (this.type == "USDT") {
            that.usdtaddress = res.data;
			if(that.tabid == 1) {
				if(res.data[1]) {
					that.address = res.data[1].chongbi_addres
				} else {
					that.tabid = 2
				}
			}
			
			if(that.tabid == 2){
				that.address = res.data[0].chongbi_addres
			}
			if(that.tabid == 3){
				that.address = res.data[2].chongbi_addres
			}
            
          }
          if (this.type == "ETH") {
            that.address = res.data[0].chongbi_addres;
          }
          if (this.type == "BTC") {
            that.address = res.data[0].chongbi_addres;
          }
		  if (this.type == "USDC") {
		    that.address = res.data[0].chongbi_addres;
		  }
          this.getqr();
        }
      );
    },
    //上传图片
    afterRead(file) {
      let files = new FormData();
      files.append("file", file.file);
      $uploadAxios(api.uploadImg, files, (res) => {
        if (res.code == 0) {
          this.img = res.save_path;
        } else {
          this.$toast(this.$t(res.msg));
        }
      });
    },
    sub() {
      var lin =
        this.type == "USDT"
          ? this.tabid == 1
            ? "ERC20"
            : this.tabid == 2
            ? "TRC20"
            : "OMNI"
          : "";

      var to = this.type == "ETH" ? this.ethaddress : this.btcaddress;
      if (this.type == "USDT") {
        to = this.address;
      }
      $postAxios(
        api.recharge,
        {
          biname: this.type,
          link: lin,
          amount: this.num,
          img: this.img,
          to: to,
        },
        (res) => {
          this.$toast(this.$t(res.msg));
		  if(res.code == 0){
			  this.$router.push({
			    name: "rechargeDetails",
			  });
		  }
          
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 100vh;
  height: auto;
  background-color: rgba(247, 246, 251, 1);
  .contentInner {
    width: 100%;
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 0;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .info {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0 20px;
    .imgkuang {
      width: 105px;
      height: 105px;
      padding: 15px;
      border: solid 1px #e5e5e5;
      border-radius: 5px;
      margin: 20px 0;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .btn {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .tabs {
      width: 100%;
      padding: 20px 0 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .onetab {
        padding: 7px 21px;
        border-radius: 5px;
        font-size: 14px;
      }
      .xuanzhong {
        background-color: #2979ff;
        border: 1px solid #2979ff;
        color: #ffffff;
      }
      .wxuanzhong {
        background-color: #edf0f7;
        color: #8d9fae;
      }
    }
    .title {
      text-align: center;
      padding: 30px 0 10px;
      font-size: 24px;
      color: #333333;
      font-weight: bold;
    }
    .address {
      width: 100%;
      font-size: 14px;
      color: #333333;
      word-wrap: break-word;
      text-align: center;
    }
    .copy {
      width: 100%;
      display: flex;
      justify-content: center;
      padding: 10px 0 30px;
    }
  }
  .tianxie {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 10px 10px;
    background-color: #ffffff;
    .inptitle {
      padding-bottom: 10px;
      font-size: 14px;
      color: #333333;
    }
    input {
      box-sizing: border-box;
      width: 100%;
      height: 40px;
      border-radius: 2px;
      border: solid 0.5px #d8dce6;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .upload {
      border-radius: 10px;
      margin-top: 10px;
      img {
        width: 80px;
        height: 80px;
        // margin: 20px 0;
      }
    }
    .subbtn {
      width: 100%;
      padding: 30px 0 20px;
      border-top: solid 1px #f7f6fb;
      border-bottom: solid 1px #f7f6fb;
      .van-button--large {
        height: 40px !important;
      }
    }
  }
}
</style>
